<!doctype html>
<html lang="zh_CN">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="./css/bootstrap@5.1.3/bootstrap.min.css">
  <link rel="stylesheet" href="./css/base.css">

  <script src="./js/plugins/holder/holder.js"></script>
  <title>图书详情页</title>
  <style>
    .book-info{
      padding:5px 0px;
    }
    .book-info .book-title{
      font-weight: bold;
      font-size:1.3em;
    }

    .book-info .book-author{
      font-size:0.8em;
      color:#555353
    }

    .book-info .book-price{
      color:#DC3545;
      font-weight: bold;
      font-size: 1.1em;
    }

    .book-info .book-tips{
      font-size: 0.5em;
      color:#c5c3c4;
    }

    .nav-tabs{
      border-bottom-color: #DC3545;
    }

    .nav-tabs .active{
      background-color: #DC3545 !important;
      color:white !important;
      border-bottom: 1px solid #DC3545;
    }

    /* 图书详情 */
    .book-detail{
      list-style-type: none;
    }

    .book-detail li{
      float:left;
      width:180px;
      font-size: 0.8em;
      margin-bottom: 1em;
      color:#666;
    }

    /* 内容简介 */
    .book-content{
      padding:0px 10px;
      text-align: justify;
      font-size: 0.8em;
      color:#666;
      text-indent: 2em;
      line-height: 30px;
    }
  </style>
</head>

<body>
  <!-- 顶部导航 -->
  <nav class="navbar navbar-expand-lg navbar-light bg-light nvarbar-padding">
    <div class="container">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText"
        aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse pt-3 pt-lg-0" id="navbarText">
        <span class="navbar-text me-auto">
          欢迎光临,请 <a href="#">登录</a> 成为会员
        </span>

        <ul class="navbar-nav mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link" href="#">首页</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">我的</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- 顶部导航 end-->
  <main class="container">
    <!-- 搜素框 -->
    <div class="row align-items-center">
      <div class="col-lg-auto d-none d-lg-block">
        <a href="#">
          <img src="./images/logo.png" alt="" />
        </a>
      </div>
      <div class="col-md-6  p-md-3 mt-3 mt-lg-0">
        <div class="input-group  ">
          <input type="text" class="form-control " style="outline: 1px solid #DC3545;"
            placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
          <button class="btn  btn-danger btn-lg" type="button" style="outline: 1px solid #DC3545;"
            id="button-addon2">&nbsp;&nbsp;<i class="bi-search"></i>&nbsp;&nbsp;</button>
        </div>
      </div>
      <div class="col-md-auto col-12 mt-lg-0 mt-3 d-flex justify-content-end">
        <div class="btn-group ">
          <button type="button" id="cart-btn" class="btn btn-danger position-relative">
            <i class="bi-cart" style="font-size: 1.2em"></i>购物车 
            <span class="position-absolute top-0 start-0 translate-middle badge rounded-pill bg-danger">0</span>
          </button>
          <button type="button " class="btn btn-light ">我的订单</button>
        </div>
      </div>
    </div>
    <!-- 搜素框 end -->
  </main>
  <!-- 分类导航信息 -->
  <div class="container mt-3">
    <div class="row nav-title">
      <div class="col-auto py-2 d-none d-md-block nav-header">
        技术方向
      </div>
      <div class="col-auto py-2 px-4">
        <a href="#">Java</a>
      </div>
      <div class="col-auto py-2 px-4">
        <a href="#">Python</a>
      </div>
      <div class="col-auto py-2 px-4">
        <a href="#">C/C++</a>
      </div>
      <div class="col-auto py-2 px-4">
        <a href="#">前端</a>
      </div>
      <div class="col-auto py-2 px-4">
        <a href="#">Spring</a>
      </div>
      <div class="col-auto py-2 px-4">
        <a href="#">JavaWeb</a>
      </div>
    </div>
  </div>
  <hr style="border:none;height:2px;background-color: #DC3545;opacity: 1;margin-top: 0;" />
  <!-- 分类导航信息 end -->

  <!-- 图书基本情况展示 -->
  <div class="container">
    <!-- 图书简要信息 -->
    <div class="row"> 
      <div class="col-12 col-md-4">
        <img src="holder.js/100px320" alt="">
      </div>
      <div class="col-12 col-md-8">
        <div class="book-info">
          <p class="book-title">
            Java从入门到精通（第5版）【软件开发视频大讲堂】
          </p>
          <p class="book-author">
            [美],凯·S.霍斯特曼（Cay,S.,Horstmann）
          </p>
          <p class="book-price">
            ￥35.00
          </p>
          <p class="add-cart">
            <div class="input-group w-50">
              <button class="btn btn-outline-secondary" type="button">-</button>
              <input type="text" class="form-control text-center input-small"  style="color:#635e5f;max-width: 80px; "  value="1"  >
              <button class="btn btn-outline-secondary" type="button">+</button> 
              &nbsp;&nbsp;
              <button class="btn btn-outline-danger ml-5" type="button">添加购物车</button>
            </div>
          </p>
          <p class="book-tips">
            温馨提示·支持7天无理由退货
          </p>
        </div>
      </div>
    </div>
    <!-- 图书简要信息 end -->
    <div class="row">
      <div class="col-12 col-md-8 offset-md-4">
        <ul class="nav nav-tabs" id="myTab" role="tablist">
          <li class="nav-item" role="presentation">
            <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">图书介绍</button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">内容简介</button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">图书评价</button>
          </li>
        </ul>
        <div class="tab-content" id="myTabContent">
          <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
            <div class="card-body">
              <div class="card-text">
                 <ul class="book-detail">
                   <li>出版社： 南海出版公司</li>
                   <li>ISBN：9787544291170</li>
                   <li>版次：2</li>
                   <li>商品编码：12152685</li>
                   <li>品牌：新经典</li>
                   <li>包装：精装</li>
                   <li>开本：32开</li>
                   <li>出版时间：2017-08-01</li>
                   <li>用纸：书写纸</li>
                   <li>页数：360</li>
                   <li>正文语种：中文</li>
                 </ul>
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
            <div class="card-body">
              <div class="card-text book-content">
                《Java从入门到精通（第5版）》从初学者角度出发，通过通俗易懂的语言、丰富多彩的实例，详细介绍了使用Java语言进行程序开发需要掌握的知识。全书分为27章，包括初识Java，熟悉Eclipse开发工具，Java语言基础，流程控制，字符串，数组，类和对象，包装类，数字处理类，接口、继承与多态，类的高级特性，异常处理，Swing程序设计，集合类，I/O（输入/输出），反射，枚举类型与泛型，多线程，网络通信，数据库操作，Swing表格组件，Swing树组件，Swing其他高级组件，高级事件处理，AWT绘图，奔跑吧小恐龙和企业进销存管理系统等。
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
             <div class="card-body">
               <div class="card-text">
                 评价，敬请期待。
               </div>
             </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 图书基本情况展示 end -->


  <!-- 页脚 -->
  <footer class="doc-footer" style="position: absolute;bottom: 0;">
    &copy;湖南农业大学
  </footer>
  <!-- 页脚 end -->

  <!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->
  <!-- 选项 1：包含 Popper 的 Bootstrap 集成包 -->
  <script src="./js/plugins/bootstrap@5.1.3/bootstrap.bundle.min.js"></script>
  <!-- 选项 2：Popper 和 Bootstrap 的 JS 插件各自独立 -->
  <!--<script src="./js/plugins/bootstrap@5.1.3/popper.min.js"></script>
    <script src="./js/plugins/bootstrap@5.1.3/bootstrap.min.js"></script>-->

    <script>
     let cartBtn=  document.getElementById("cart-btn");

     cartBtn.onclick=function(){
       location.href="cart.html";
     }
    </script>
</body>

</html>